<template>
  <div class="tl-button-ref-container">
    <div v-show="display" :style="render === 'div' ? 'width:' + width + ';height:' + height : 'height:100vh;width:100vw;position:fixed;z-index:1020;top:0;left:0'">
      <tl-iframe ref="frame" :id="iframId" :transparentBg="true" @afterEditQueryData="afterRepairEditQueryData" @repairEditClose="closeOmsRepairEdit" :url="url.baseUrl" :path="url.path" :render="render" :data="paramData" height="100%"></tl-iframe>
    </div>
  </div>
</template>

<script>
import { re } from 'semver'
/** mixins */
/** 子组件 */
/** 工具类 */
/** VUE配置 */
export default {
  name: 'cosRepairEditComp',
  mixins: [],
  components: {},
  data() {
    return {
      display: false,
      url: {
        baseUrl: process.env.OMS_URL + '/dynamic',
        path: 'cos/cosRepairApply/edit'
        // baseUrl: process.env.MEET_URL + '/dynamic',
        // path: 'meet/meetManage/edit'
      },
      paramData: {},
      showFrame: true,
      dynamicLoadedFlag: false
    }
  },
  props: {
    // Ifram唯一标识
    iframId: {
      type: String,
      default: ''
    },
    sourceType: {
      type: String,
      default: ''
    },
    sourceId: {
      type: Number,
      default: 0
    },
    sourceApp: {
      type: String,
      default: ''
    },
    disableEditSubmit: {
      type: Boolean,
      default: false
    },
    // 是否显示默认按钮
    isDisplayDefaultElement: {
      default: true,
      type: Boolean
    },
    buttonName: {
      type: String,
      default: '返修'
    },
    render: {
      type: String,
      default: 'el-dialog'
    },
    width: {
      type: String,
      default: '1000px'
    },
    height: {
      type: String,
      default: '700px'
    },
    omsRepairArr: {
      type: Array,
      default: () => { return [] }
    },
    omsRepairId: null
  },
  computed: {
  },
  watch: {
  },
  methods: {
    // 返修单查询数据后（加载数据后，添加数据后、修改数据后都会触发此方法）
    afterRepairEditQueryData(repairModel) {
      // 若当前omsRepairId为空，则需要添加此返修单和技术服务单的关联关系
      if (!this.omsRepairId) {
        let repairModelArr = []
        repairModelArr.push(repairModel)
        this.saveRepaire(repairModelArr)
      }
    },
    // Iframe加载完成后
    iframLoaded() {
      this.$emit('repairEditLoaded')
    },
    // 调用父组件保存返修单
    saveRepaire(omsRepairArr) {
      // 保存成功后，通知父组件
      this.$emit('afterRepairAdd', omsRepairArr)
    },
    // 关闭oms返修单编辑弹框
    closeOmsRepairEdit() {
      this.display = false
      this.showFrame = false
      // 通知父组件关闭事件
      this.$emit('closeOmsRepairEdit', this.sourceId)
    },
    resetParamData() {
      console.log(this.omsRepairId)
      this.paramData.id = this.omsRepairId
      this.paramData.isAdd = !this.omsRepairId
      this.paramData.visible = true
      this.paramData.microsourcetype = this.sourceType
      this.paramData.sourceid = this.sourceId
      this.paramData.sourceapp = this.sourceApp
      this.paramData.disableEditSubmit = this.disableEditSubmit
    },
    openRepairEdit() {
      this.resetParamData()
      this.display = true
      this.$nextTick(() => {
        this.$refs.frame.prefetchLoad()
      })
    },
    prefetch() {
      this.$refs.frame.prefetch()
    }
  },
  mounted() {
    // 监听fram中的loaded值判断是否加载完成
    this.$nextTick(() => {
      this.$watch(
        () => {
          return this.$refs.frame.loaded
        },
        (val) => {
          this.dynamicLoadedFlag = val
          this.iframLoaded()
        }
      )
    })
    if (this.render === 'div') {
      this.resetParamData()
    }
    if (this.omsRepairArr && this.omsRepairArr.length > 0) {
      this.omsRepairId = this.omsRepairArr[0].omsrepairid
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.moreBtnClass {
  margin-top: 10px;
}
.btnGroupClass {
  background: white;
  min-width: 100px;
  padding-left: 25px;
}
</style>
